<template>
	<view>
		<view class="status_bar"></view>
		<view style="height: 90px;">
			<swiper class="screen-swiper round-dot" :indicator-dots="true" :circular="true" :autoplay="true" interval="5000"
			 duration="500" style="height: 90px;">
				<swiper-item style="height: 90px;" @tap.stop="navTo(item)" v-for="(item,index) in banner" :key="index">
					<image :src="item.value" style="height: 90px;"></image>
				</swiper-item>
			</swiper>
		</view>
		<view class="sticky bg-white">
			<view class="flex padding-sm text-center">
				<view class="flex-sub">
					<button class="cu-btn" @tap="setType('1')" :class="[queryData.recruitType=='1'?'blue-border':'line-black']">招聘信息</button>
				</view>
				<view class="flex-sub">
					<button class="cu-btn radius" @tap="setType('0')" :class="[queryData.recruitType=='0'?'blue-border':'line-black']">求职信息</button>
				</view>
				<!--
				<view class="flex-sub">
					<button class="cu-btn line-black" @tap="down">app下载</button>
				</view>
				-->
			</view>
			<view class='padding-bottom-sm text-df text-center'>
				<view class="flex">
					<view class="flex-sub text-cut" bindtap='showCity'>
						<picker @change="provChange" range-key="attenCity" :range="provices">
							{{attenCity}} <text class="cuIcon-triangledownfill"></text>
						</picker>
					</view>
					<view class="flex-sub text-cut">
						<picker @change="dtTypeChange" range-key="dtypeName" :range="driverRecruit">
							<view class="picker">
								<text class="" style="width:20vw">{{dtypeName}} </text>
								<text class="cuIcon-triangledownfill"></text>
							</view>
						</picker>
					</view>
					<view class="flex-sub">
						<picker @change="dlTypeChange" :range="license" range-key="dlTypeName">
							<view class="picker">
								{{dlTypeName}} <text class="cuIcon-triangledownfill"></text>
							</view>
						</picker>
					</view>
				</view>
			</view>
		</view>
<!-- margin-xs -->
		<view class="padding-sm bg-white  radius margin-top-sm margin-left-xs margin-right-xs" @tap="detail(item)" :key="item.index" v-for="(item, index) in list.rows">
			<view class="padding-xs flex">
				<!-- text-cut -->
				<view class="flex-sub text-lg text-bold multi-line">
					{{item.title}}
				</view>
				<view class="text-right  padding-top-xs" style="width: 100upx;">
					 <view class="text-red" v-if="item.isUrgent=='1'||item.isTop=='1'">
					   <template v-if="item.recruitType==1">{{'急聘'}}</template>
						<template v-else="item.recruitType==0">{{'加急'}}</template>
					 </view>
					 <!-- <view class="text-blue" v-if="item.isUrgent=='0'&&item.isTop=='1'">
						  {{'置顶'}} 
					 </view> -->
				</view>
			</view>
			<view class="flex padding-xs">
				<view class="flex-sub">
					<template v-if="item.salary"><text class="text-theme">{{item.salary}}</text>/月</template>
					<template v-else><text class="text-theme">面谈</text></template>
					
					<view v-if="item.dlTypeName!='不限'" class="margin-left cu-tag radius line-blue">{{item.dlTypeName}} 驾照</view>
				</view>
			</view>
			 <!-- <view style="border:1upx solid #e4e7ed" class=""></view> -->
			<view class="flex align-center margin-top-xs padding-top-xs" style="border-top: 1px solid #eee;" >
				<view class="flex-sub text-green">
					<view class="flex-sub align-center text-df">
						<text class="text-gray">{{ dateSub(item.creTm) }}</text> 
						<text class="text-gray margin-left-xs margin-right-xs"> | </text>
						<text class="text-gray ">{{ getPro(item.areaCode, item.cityName) }}</text>
					</view>
				</view>
				<view class="align-center text-right text-gray text-sm padding-right" style="margin-left: auto;">
					<!-- <view class="flex-sub"> -->
						<button class="cu-btn bg-theme" @tap.stop="phoneCall(item.ancId)">免费联系</button>
					<!-- </view> -->
				</view>
			</view>
		</view>

		<view v-if="isLoad" class="cu-load text-gray loading"></view>
		<view v-else-if="list.rows.length < list.total" class="cu-load text-gray">已加载</view>
		<view v-else-if="list.rows.length==list.total && list.total!=0" class="cu-load text-gray over"></view>
		<view v-else="list.total==0" class="margin-top padding-top text-center text-gray">
			<text class="cuIcon-activityfill" style="font-size: 30px;"></text>
			<view class="">
				暂无数据
			</view>
			
		</view>
		<view class="fixed-pub-btn" @tap="navTo({url:'/pages/pub/pub'})">
			 发布 
		</view>

		<view class="cu-modal" :class="showModal?'show':''">
			<view class="cu-dialog">
				<view class="cu-bar bg-white justify-end">
					<view class="content text-orange text-bold">恭喜你获得</view>
					<view class="action" @tap="showModal = false">
						<text class="cuIcon-close text-red"></text>
					</view>
				</view>
				<view class="padding bg-white">
					<view class="bg-gradual-orange padding flex">
						<view class="flex-sub text-left">
							<view class="text-sm bg-white text-orange" style="display: inline;padding: 2px 5px;border-radius: 5px;">
								幸运特权
							</view>
							<view class="text-bold text-xl padding-top-xs">
								签到奖励
								<text class="margin-left text-xxl">2~6</text>
								<text class="margin-left text-sm">积分</text>
							</view>
						</view>
					</view>
					<view class="padding bg-gradual-yellow text-bold text-black">
						每天登录就有机会获取
					</view>
				</view>
				<view class="cu-bar bg-white text-center justify-center">
					<button class="copy-btn cu-btn bg-theme" @tap="sign">立即签到</button>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import proData from '../../utils/city-data/province.js'
	import {location} from '../../utils/util.js'
	export default {
		data() {
			return {
				banner:[],
				defaultBanner: [{
						value: '../../static/banner/banner1.jpg',
						url: '/pages/index/group'
					},
					
					/*{
						value: '../../static/banner/banner2.jpg',
						url: '/pages/index/download'
					},*/
					
					{
						value: '../../static/banner/banner3.png',
						url: '/pages/index/cuser'
					}, {
						value: '../../static/banner/banner4.png',
						url: '/pages/user/pay'
					}
				],
				isLoad: true,
				list: [],
				attenCity: "全国",
				dtypeName: "类型不限",
				dlTypeName: "驾照不限",
				provices: [],
				license: [],
				driverRecruit: [],
				queryData: {
					state: 1,
					isLock: '1',
					currPage: 1,
					areaCode: -1,
					recruitType: '1',
					dtypeId: '',
					dlTypeId: ''
				},
				showModal: false,
				signDate: '',
				
				phoneData: {
					phone: '',
				},
			};
		},
		onLoad(options) {
			// 
			let u = uni.getStorageSync('ONLINE_USER');
			if(u && options.code){
				this.baseRequest('api/user/bingwx/'+options.code, 'POST', {}, function(res, info) {
					u.openID = res;
					uni.setStorageSync('ONLINE_USER', u);
				}, function(res){});
			}
			const current = new Date();
			const year = current.getFullYear(); // 得到年份
			let month = current.getMonth()+1; // 得到月份
			let date = current.getDate(); // 得到日期
			let timestamp = (new Date(year + '/' + month + '/' + date)) / 1000;
			let signDate = uni.getStorageSync('signDate');
			if (u && signDate != timestamp) {
				// this.showModal = true
				this.signDate = timestamp
			}
			// 
			// return;
			if(u && !u.openID && !options.code){
				if (this.$wx.isWechat()) {
					let host = window.location.protocol+"//"+window.location.host;
					window.location.replace(host + '/code.html?page=index');
				} 
			}
			this.getConfig();
		},
		onShow() {
			this.getBanners();
			this.getProvices();
			this.getLicense();
			this.getRecruit();
			this.getList();
			
			let getLocation = sessionStorage.getItem('getLocation');
			if(!getLocation){ //初始化
				this.$wx.getlocation(function(r) {
					let coords = r.latitude + ',' + r.longitude;
					let _url = 'https://api.map.baidu.com/reverse_geocoding/v3/?ak=PiX7MC2wpumZAyj54mGVIEp46XHcG4Gd&output=json&coordtype=wgs84ll&callback=showLocation&location='+coords
					var script = document.createElement("script");  //创建一个script标签
					script.type = "text/javascript";
					script.src = _url;
					document.getElementsByTagName('head')[0].appendChild(script);
				});
				// 上报用户信息
				if(typeof androlua == "undefined"){
					
				}else{
					let user = uni.getStorageSync('ONLINE_USER');
					let Authorization = uni.getStorageSync('Authorization');
					let data = {
						userID: user.userID,
						userName: user.userName,
						wxnickName: user.wxnickName,
						phoneNo: user.phoneNo,
						Authorization: Authorization
					}
					androlua.pageSetUserInfo(JSON.stringify(data));
					// androlua.pageGoBack();
				}
				sessionStorage.setItem('getLocation', '1');
			}
		},
		onHide() {},
		components: {},
		onReachBottom() {
			if (this.list.rows.length == this.list.total) {
				return;
			}
			this.isLoad = true;
			let _this = this;
			setTimeout(() => {
				_this.queryData.currPage += 1;
				_this.getList();
			}, 500);
		},
		methods: {
			phoneCall(ancId){
				let _this = this;
				uni.showLoading({
					mask: true,
					title: '号码获取中...'
				})
				this.baseRequest('api/driver/info/phone', 'GET', {
					ancId
				}, function(res, info) {
					uni.hideLoading();
					if (res) {
						_this.getPhone = true;
						_this.phoneData = res;
						// _this.detail.phone = _this.phoneData.phone;
						uni.makePhoneCall({
							phoneNumber: _this.phoneData.phone
						})
					} else {
						uni.showToast({
							icon: 'none',
							title: info
						})
					}
				}, function(res) {
					uni.hideLoading();
					if (_this.code) {
						// 跳页面，邀请好友进来的页面
						uni.navigateTo({
							url: '/pages/user/inteuser?id=' + _this.code
						})
						return;
					}
					if (res.code == -100) {
						uni.showModal({
							title: '提示',
							content: res.info,
							success: function(res) {
								if (res.confirm) {
									uni.navigateTo({
										url: '/pages/user/pay'
									})
								} 
							}
						});
					}else{
						uni.showModal({
							title: '提示',
							content: res.info
						});
					}
				});
			},
			getBanners(){
				let _this = this;
				this.baseRequest('api/parm/', 'GET', {parmName:'indexPic%'}, function(res, info) {
					_this.banner=res&&res.length>0?res:_this.defaultBanner
				});
			},
			getConfig(){
				this.baseRequest('api/parm/', 'GET', {parmName:'h5%'}, function(res, info) {
					uni.setStorageSync('config', res)
				});
			},
			request(url, callback, referer) {
			        var xmlhttp = new XMLHttpRequest();
			        xmlhttp.addEventListener('load', function() {
			          callback(xmlhttp.responseText)
			        })
			        xmlhttp.open("GET", url, true);
			        if (referer) {
			          xmlhttp.setRequestHeader('x-referer', referer)
			        }
			        xmlhttp.send();
			      },
			log(){
				// 记录活跃和定位信息
				let data = location();
				let _this = this;
				this.baseRequest('api/dau/log', 'GET', {}, function(res, info) {
					_this.baseRequest('api/dau/log/user', 'POST', {areaName: data.attenCity, address: data.address}, function(res, info) {
					}, function(){});
				}, function(){});
			},
			sign() {
				this.showModal = false;
				uni.showLoading({
					mask: true
				})
				let _this = this;
				this.baseRequest('api/driver/sign/in', 'GET', {}, function(res, info) {
					setTimeout(() => {
						uni.hideLoading();
						uni.setStorageSync('signDate', _this.signDate);
						_this.log();
						setTimeout(() => {
							uni.showToast({
								title: info
							});
						}, 1000)
					}, 0);
				}, function(res){
					uni.setStorageSync('signDate', _this.signDate)
					uni.showToast({
						title: res.info,
						icon: 'none'
					});
				});
			},
			dateSub(time) {
				return time.substr(5, 5)
			},
			down() {
				navTo({url:'/pages/index/download'})
			},
			navTo(item) {
				if (item.url) {
					if(item.url.startsWith('http')){
						window.open(item.url);
					}else{
						uni.navigateTo({
							url: item.url
						})
					}
					
				}
			},
			// 设置城市
			getPro(areaCode, cityName) {
				if (areaCode == '-1' || !areaCode) {
					return '全国';
				}
				areaCode = areaCode.substring(0, 2) + '0000';
				let pro = '';
				for (let i = 0; i < proData.length; i++) {
					if (areaCode == proData[i].value) {
						pro = proData[i].label;
					}
				}
				if (pro == cityName) {
					return cityName;
				} else if (cityName == '不限') {
					return pro;
				} else {
					return pro + ' - ' + cityName;
				}
			},
			detail(item) {
				uni.showLoading({
					mask: true,
					title: '请稍候...'
				})
				this.baseRequest('api/getCurrentUserData', 'GET', {}, function(res, info) {
					uni.hideLoading();
					uni.navigateTo({
						url: '/pages/index/detail?id=' + item.ancId
					})
				}, function() {});
			},
			getLicense() {
				let defa = [{
					dlTypeId: '',
					dlTypeName: '驾照不限'
				}];
				let d = uni.getStorageSync("license");
				if (d) {
					this.license = defa.concat(d);
					return;
				}
				let _this = this;
				this.baseRequest('api/driver/license', 'GET', {}, function(res, info) {
					_this.license = defa.concat(res.rows)
					uni.setStorageSync('license', res.rows);
				});
			},
			getRecruit() {
				let defa = [{
					dtypeId: '',
					dtypeName: '类型不限'
				}];
				let d = uni.getStorageSync("driverRecruit");
				if (d) {
					this.driverRecruit = defa.concat(d);
					return;
				}
				let _this = this;
				this.baseRequest('api/driver/recruit', 'GET', {}, function(res, info) {
					_this.driverRecruit = defa.concat(res.rows)
					uni.setStorageSync('driverRecruit', res.rows);
				});
			},
			getProvices() {
				let defa = [{
					areaCode: '-1',
					attenCity: "全国"
				}];
				let d = uni.getStorageSync("prov");
				if (d) {
					this.provices = defa.concat(d);
					return;
				}
				let _this = this;
				this.baseRequest('api/driver/city/prov', 'GET', {}, function(res, info) {
					_this.provices = defa.concat(res);
					uni.setStorageSync('prov', res);
				});
			},
			dtTypeChange(e) {
				this.queryData.currPage = 1;
				let idx = e.detail.value;
				this.queryData.dtypeId = this.driverRecruit[idx].dtypeId;
				let dtypeName = this.driverRecruit[idx].dtypeName;
				dtypeName = dtypeName.length > 8 ? dtypeName.substr(0, 6) + '...' : dtypeName;
				this.dtypeName = dtypeName;
				this.getList();
			},
			dlTypeChange(e) {
				this.queryData.currPage = 1;
				let idx = e.detail.value;
				this.queryData.dlTypeId = this.license[idx].dlTypeId;
				this.dlTypeName = this.license[idx].dlTypeName;
				this.getList();
			},
			provChange(e) {
				this.queryData.currPage = 1;
				let idx = e.detail.value;
				this.queryData.areaCode = this.provices[idx].areaCode;
				this.attenCity = this.provices[idx].attenCity;
				this.getList();
			},
			setType(type) {
				this.queryData.currPage = 1;
				this.queryData.recruitType = type;
				this.getList();
			},
			getList() {
				let _this = this;
				this.baseRequest('api/driver/info/list', 'GET', this.queryData, function(res, info) {
					_this.isLoad = false;
					if (res) {
						if (_this.queryData.currPage != 1) {
							_this.list.rows = _this.list.rows.concat(res.rows);
							_this.list.total = res.total;
						} else {
							_this.list = res;
						}
					} else {
						if (_this.queryData.currPage != 1) {
							return;
						}
						_this.list = {
							total: 0,
							rows: []
						};
					}
				});
			}
		}
	}
</script>
